<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>vue-demo</title>
  <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>

</head>

<body style="background-color: darkgrey;">
  <div id="app">
    
  </div>
  <!-- 主体区域 -->
  <section id="todoapp">
    <!-- 输入框 -->
    <header class="header">
      <h1>小黑笔记本</h1>
      <input type="text" v-model="inputValue" @keyup.enter="add" autofocus="autofocus" autocomplete="off"
        placeholder="请输入歌曲名" class="new_todo" />
    </header>
    <hr />
    <!-- 列表区域 -->
    <section class="main">
      <ul class="todo-list">
        <li class="todo" v-for="(item,index) in list ">
          <div class="view">
            <span style="float: left;">{{index+1}}.</span>
            <label>{{item}}</label>
            <button class="destroy" v-show="rm" style="float: right;" @click="remove(index)">&#10007</button>
          </div>
          <hr />
        </li>
      </ul>
    </section>
    <div>
      <router-view></router-view>
    </div>
    <footer style="background-color: floralwhite;width: 500px;height: 30px;">
      <span v-text="list.length+'&emsp;Items'" v-if="list.length != 0" style="float: left;margin-left: 20px;"></span>
      <button style="float: right;margin-right: 20px;" @click="clear">clear</button>
    </footer>
  </section>
  <!-- js -->
  <script>
    const todoapp = new Vue({
      el: "#todoapp",
      data: {
        list: ["写代码", "吃饭", "打豆豆"],
        inputValue: "",
        rm: true,
      },
      methods: {
        // 给数组中添加元素
        add() {
          let t = this;
          axios.get('https://autumnfish.cn/search?keywords=' + this.inputValue)
            .then(
              function (data) {
                // console.log(data.data.result.songs[0].artists[0].name);
                let name = data.data.result.songs[0].artists[0].name;
                t.list.push(name);
                // 添加完成后清空元素
                t.inputValue = "";
              },
            )
            .catch(function (err) {

            });
        },
        // 根据索引删除元素
        remove(index) {
          console.log(index + "删除")
          // 删除 ，一次只删除一个
          this.list.splice(index, 1)
        },
        // 清空全部
        clear() {
          this.list = []
        },
        // 鼠标移至容器触发元素回显
        out() {
          this.rm = !this.rm;
        }

      },
    })

  </script>
</body>
<script>

</script>

</html>
